<template>
    <div class="serviceRecord">
        <mt-loadmore :bottom-method="loadBottom" :bottom-all-loaded="allLoaded" :bottom-status.sync="bottomStatus"
            @bottom-status-change="handleBottomChange" ref="loadmore" :autoFill="autoFill">
            <div class="box" v-for="(item, index) in listData" :key="index">
                <p class="title"><span>{{item.callTime}}</span><span :class="[item.status=='进行中' ?'active':'']">{{item.status}}</span></p>
                <p>{{item.operation}}</p>
                <p>地址：{{item.location}}</p>
            </div>
            <div slot="bottom" class="mint-loadmore-bottom">
                <span v-show="bottomStatus !== 'loading'" :class="{ 'rotate': bottomStatus === 'drop' }">↑</span>
                <span v-show="bottomStatus === 'loading'">
                    <mt-spinner type="snake"></mt-spinner>
                </span>
            </div>
        </mt-loadmore>
    </div>
</template>
<script>
export default {
    data(){
        return{
            curPage: 1,
            pageSize: 20,
            status: '进行中',
            allLoaded: false,
            bottomStatus: '',
            autoFill:false,
            listData:[]
        }
    },
    mounted (){
        let _this = this
        _this.getDetailList()
    },
    methods: {
        getDetailList(){
             let _this = this
            var p = {}
            p.curPage = _this.curPage
            p.pageSize = _this.pageSize
            _this.ACApi.serviceRecord(p,{
                onSuccess: res => {
                    if(res.data.statusCode == 'SUCCESS'){
                        res.data.result.list.map(function(i) {
                            if(i.status == '0'){
                                i.status = '进行中'
                            }else if(i.status == '1'){
                                i.status = '已完成'
                            }
                            if(i.operation == '0'){
                                i.operation = '为自己呼救'
                            }else if(i.operation == '1'){
                                i.operation = '为亲朋呼救'
                            }else if(i.operation == '2'){
                                i.operation = '为他人呼救'
                            }
                            _this.listData.push(i)
                        })
                        
                        if(res.data.result.list==''){
                            _this.allLoaded = true
                        }
                    }
                },
                onFail: error => console.log(error)
            })
        },
        loadBottom() {
            let _this = this
            _this.curPage += 1
            _this.getDetailList()
            _this.$refs.loadmore.onBottomLoaded();
        },
        handleBottomChange(status) {
            let _this = this
            _this.bottomStatus = status
        }
    }
}
</script>
<style lang="stylus" scoped>
@import '../../../assets/css/var'
    .serviceRecord{
       background-color:$White
       .box{
           width 100%
           height 1.8rem
           border-bottom 1px solid $dWhite
           padding .3rem .4rem
           box-sizing border-box
           p{
               height .4rem
               line-height .4rem
               font-size $text-font24
               color $elBlack
               span{
                   font-size $text-font28
                   color $lBlack
               }
           }
           .title{
               margin-bottom .1rem
           }
           p:last-child{
               padding 0
           }
           .title{
               >span:last-child{
                   float right
               }
           }
           .active{
               color $green
           }
       }
    }
    .mint-loadmore-bottom {
        span {
            display: inline-block;
            transition: .2s linear;
            vertical-align: middle;
            font-size: $line-height-34;
            &.rotate {
                transform: rotate(180deg);
            }
        }
    }
</style>